<template>
  <div class="app-container">
    <el-card class="box-card search-div">
      <el-form :inline="true">
        <el-form-item label="模块">
          <el-input placeholder="请输入查询的模块" v-model="listQuery.module" />
        </el-form-item>
        <el-form-item label="功能">
          <el-input placeholder="请输入查询的功能" v-model="listQuery.fun" />
        </el-form-item>
        <el-form-item label="IP">
          <el-input placeholder="请输入查询的IP" v-model="listQuery.operIp" />
        </el-form-item>
        <el-form-item label="操作状态">
          <el-select v-model="listQuery.status" style="width:80px">
            <el-option label="所有" value=""></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="handleSearch" icon="el-icon-search">搜索</el-button>
        <el-button @click="handleReset" icon="el-icon-refresh">重置</el-button>
      </el-form>
    </el-card>

    <el-card class="box-card">
      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row class="table-list">
        <el-table-column label="序号" type="index" min-width="5%"/>
        <el-table-column align="center" label="操作模块" prop="module">
        </el-table-column>
        <el-table-column align="center" label="操作功能" prop="fun">
        </el-table-column>
        <el-table-column align="center" label="操作人员" prop="userName">
        </el-table-column>
        <el-table-column align="center" label="请求url" prop="operUrl">
        </el-table-column>
        <el-table-column align="center" label="操作IP" prop="operIp">
        </el-table-column>
        <el-table-column align="center" label="操作时间" prop="operTime">
        </el-table-column>
        <el-table-column class-name="status-col" label="操作状态" width="100"  prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==0">正常</el-tag>
            <el-tag v-if="scope.row.status==1" type="danger">异常</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button plain type="primary" @click="handleView(scope.$index, scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
          :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-dialog title="日常详情" :width="'800px'" :visible.sync="showDialog" :close-on-click-modal="false">
      <el-form ref="saveLogData" :model="saveLogData" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="操作模块" prop="module">
              <span>{{saveLogData.module}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作功能" prop="fun">
              <span>{{saveLogData.fun}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作人员" prop="userName">
              <span>{{saveLogData.userName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
           <el-form-item label="操作时间" prop="operTime">
              <span>{{saveLogData.operTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="请求url" prop="operUrl">
              <span>{{saveLogData.operUrl}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
           <el-form-item label="操作状态" prop="status">
          <el-tag v-if="saveLogData.status==0">正常</el-tag>
          <el-tag v-if="saveLogData.status==1" type="danger">异常</el-tag>
        </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="16">
          <el-form-item label="请求方法" prop="method">
            <span>{{saveLogData.method}}</span>
          </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作IP" prop="operIp">
              <span>{{saveLogData.operIp}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="请求参数" prop="operParam">
          <!-- <span>{{saveLogData.operParam}}</span> -->
          <json-viewer :value="saveLogData.operParam" boxed copyable :expand-depth=5></json-viewer>
        </el-form-item>
        <el-form-item label="错误信息" prop="errorMsg">
          <span>{{saveLogData.errorMsg}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as sysOperlog from './js/syslog'
import { mapGetters } from 'vuex'

export default {
  name: 'sysLogList',
  data() {
    return {
      list: null,
      listLoading: true,
      showDialog: false,
      total: 0,
      listQuery: {
        page: 1, limit: 10, status: '', module: '', fun: ''
      },
      saveLogData: { module: '', fun: '', method: '', userName: '', operUrl: '', operIp: '', operParam: '', errorMsg: '', operTime: '', status: '' }
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  created() {
    this.getList()
  },
  methods: {
    getList() { // 获取所有系统操作日志
      this.listLoading = true
      sysOperlog.fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleReset(){
      this.listQuery = {
        page: 1, limit: 10, status: '', module: '', fun: ''
      }
      this.getList()
    },
    handleSearch() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleView(index, row) {
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs['saveLogData'].resetFields()
        this.saveLogData.module = row.module
        this.saveLogData.fun = row.fun
        this.saveLogData.method = row.method
        this.saveLogData.userName = row.userName
        this.saveLogData.operUrl = row.operUrl
        this.saveLogData.operIp = row.operIp
        this.saveLogData.operParam = row.operParam
        this.saveLogData.errorMsg = row.errorMsg
        this.saveLogData.operTime = row.operTime
        this.saveLogData.status = row.status
      })
    }
  }
}
</script>
